<template>
  <el-container class="h-screen !flex-col">
    <kHeader />
    <el-container class="overflow-hidden">
      <el-aside :width="asideWidth">
        <kMenu />
      </el-aside>
      <el-container class="!flex-col bg-gray-100">
        <kTagList />
        <el-main class="bg-gray-100">
          <kMain />
        </el-main>
        <kFooter />
      </el-container>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { kHeader, kMenu, kTagList, kFooter, kMain } from './components'
const settingStore = useSettingStore()
const asideWidth = computed(() => settingStore.asideWidth)
</script>

<style lang="scss" scoped>
.el-aside {
  transition: var(--k-transition);
}
</style>
